<template>
  <div>
    <el-dialog
    class="dialog"
    :title="'开启'+thistitle"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    width="59%"
    :before-close="closeDialog">
        <el-form :model="form">
            <el-form-item :label="thistitle+'名称'" label-width="">
                <el-input size="small" class="fireWidth" v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="thistitle+'简介'" label-width="">
                <el-input
                type="textarea"
                :rows="5"
                :autosize="{ minRows: 5, maxRows: 5}"
                class="fireWidth"
                
                v-model="form.info">
                </el-input>
            </el-form-item>
            <el-form-item label="单位" label-width="">
                <el-input size="small" class="fireWidth" v-model="form.unitName" autocomplete="off"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="10">
                    <el-form-item :label="thistitle+'开始时间'">
                        <el-date-picker
                            size="small"
                            v-model="form.startTime"
                            type="datetime"
                            placeholder="选择日期时间">
                            </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item :label="thistitle+'开始时间'">
                        <el-date-picker
                            size="small"
                            v-model="form.stopTime"
                            type="datetime"
                            placeholder="选择日期时间">
                            </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item :label="thistitle+'产品主图片'">
                <ul class="fireWidth flexbox">
                    <li class="imgList" v-if="form.image">
                        <el-image
                        class="elimg"
                        :src="form.image"
                        >
                        </el-image>
                        <div class="iconBg">
                            <div class="ibox">
                                <i @click="lookBigimg('star')" class="el-icon-view"></i>
                                <i @click="delImg('str')" class="el-icon-delete"></i>
                            </div>
                        </div>
                    </li>
                    <li v-if="!form.image" class="addImage"
                    @click="dialogVisiblePicFn(1)">
                        <i class="el-icon-plus"></i>
                    </li>
                </ul>
            </el-form-item>
            <el-form-item :label="thistitle+'产品轮播图'">
                <ul class="fireWidth flexbox">
                    <li class="imgList" v-for="(img,index) in form.images" :key="index">
                        <el-image
                        class="elimg"
                        :src="img"
                        >
                        </el-image>
                        <div class="iconBg">
                            <div class="ibox">
                                <i v-if="index!=0" @click="imgtoLeft(index)" class="el-icon-back"></i>
                                <i  @click="lookBigimg(index)" class="el-icon-view"></i>
                                <i @click="delImg(index)" class="el-icon-delete"></i>
                                <i v-if="index!=form.images.length-1" @click="imgtoRight(index)" class="el-icon-right"></i>
                            </div>
                        </div>
                    </li>
                    <li v-if="form.images!=undefined&&form.images.length<=3" 
                    class="addImage"
                    @click="dialogVisiblePicFn(4)"
                    >
                        <i class="el-icon-plus"></i>
                    </li>
                </ul>
            </el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="库存">
                        <el-input-number size="small" v-model="form.stock"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="销量">
                        <el-input-number size="small" v-model="form.sales"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="砍价金额">
                        <el-input-number size="small" v-model="form.price"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="允许砍到最低价">
                        <el-input-number size="small" v-model="form.minPrice"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="限购">
                        <el-input-number size="small" v-model="form.num"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="单次砍最高价">
                        <el-input-number size="small" v-model="form.bargainMaxPrice"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="单次砍最低价">
                        <el-input-number size="small" v-model="form.bargainMinPrice"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用户每次砍价的次数">
                        <el-input-number size="small" v-model="form.bargainNum"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="单次砍最低价">
                        <el-radio v-model="form.status" :label="1">开启</el-radio>
                        <el-radio v-model="form.status" :label="0">关闭</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="成本价">
                        <el-input-number size="small" v-model="form.cost"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="排序">
                        <el-input-number size="small" v-model="form.sort"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item :label="thistitle+'规则'" label-width="">
                <MyEditor :rule="form.rule" @input="input"></MyEditor>
            </el-form-item>
            <el-form-item :label="thistitle+'详情'" label-width="">
                <MyEditor1 :description="form.description" @input1="input1"></MyEditor1>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="text" @click="closeDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="addSubmit">确 认</el-button>
        </span>
    </el-dialog>
    <el-dialog :visible.sync="imgVisible" class="dialog2">
        <img width="100%" :src="thisimg" alt="">
    </el-dialog>
    <picchoose
        :dialogVisiblePic="dialogVisiblePic"
        ref="dialogVisiblePic"
        @closeDialogpic="closeDialogpic"
        @PicTrue="PicTrue"
        :imagesNum="form.images.length"
        @PicTrueList="PicTrueList"
        :checkNum="checkNum"
        >
    </picchoose>
  </div>
</template>

<script>
import MyEditor from '@/components/MyEditor.vue'
import MyEditor1 from '@/components/MyEditor1.vue'
import picchoose from '@/components/picchoose.vue'
export default {
    components:{MyEditor,MyEditor1,picchoose},
    name:"EditPopup",
    data() {
        return {
            dialogVisiblePic:false,
            checkNum:1,
            form:{},
            imgVisible:false,
            thisimg:''
        }
    },
    methods: {
        PicTrueList(array){
            let _self = this;
            console.log(array);
            if(_self.form.images.length!=0){
                _self.form.images = _self.form.images.concat(array)
            }else{
                _self.form.images = array;
            }
            _self.$refs.dialogVisiblePic.dialogVisiblePic = false;
        },
        PicTrue(src){
            let _self = this;
            console.log(src)
            _self.form.image = src;
            _self.$refs.dialogVisiblePic.dialogVisiblePic = false;
        },
        // 打开图片弹窗
        dialogVisiblePicFn(num){
            let _self = this;
            _self.checkNum = num;
            _self.$refs.dialogVisiblePic.dialogVisiblePic = true;
        },
        // 关闭图片弹窗
       closeDialogpic(){
        let _self = this;
        _self.$refs.dialogVisiblePic.dialogVisiblePic = false;
       },
        // 删除图片
        delImg(index){
            this.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                if(isNaN(index)){
                    this.form.image = ''
                }else{
                    this.form.images.splice(index,1)
                }
            }).catch(() => {});
        },
        //点击查看大图
        lookBigimg(index){
            if(isNaN(index)){
                this.thisimg = this.form.image
            }else{
                this.thisimg = this.form.images[index];
            }
            this.$nextTick(()=>{
                this.imgVisible = true
            })
        },
        // 左移轮播图
        imgtoLeft(index){
            for(let i in this.form.images){
                if(index == i){
                    let temp = this.form.images[i]
                    this.$set(this.form.images,i,this.form.images[i-1])
                    this.$set(this.form.images,i-1,temp)
                }
            }
        },
        // 右移轮播图
        imgtoRight(index){
            for(let i in this.form.images){
                if(index == i){
                    let temp = this.form.images[+i+1]
                    this.$set(this.form.images,+i+1,this.form.images[i])
                    this.$set(this.form.images,+i,temp)
                }
            }
        },
        // 规则传值
        input(rule){
            this.form.rule = rule
        },
        // 详情传值
        input1(description){
            this.form.description = description
        },
        // 关闭弹窗
        closeDialog(){
            this.$emit('closePopup')
        },
        // 保存修改
        addSubmit(){
            this.$emit('editingCompleted',this.form)
        }
    },
    watch:{
        dialogFormVisible(newVal){
            this.dialogFormVisible = newVal
        },
        sendtoPopup(nowData){
            if(!Array.isArray(nowData.images)){
                nowData.images = nowData.images.split(',');
            }
            this.form = nowData
        }
    },
    props:{
        dialogFormVisible:{
            type:Boolean,
            required:true
        },
        thistitle:{
            type:String,
            required:true
        },
        sendtoPopup:{
            type:Object
        },
    },
}
</script>

<style lang="less">
    .dialog2 .el-dialog{
        width: 35%;
        text-align: center;
        margin: 0 auto;
    }
    .addImage{
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 148px;
        height: 148px;
        cursor: pointer;
        line-height: 146px;
        vertical-align: top;
        &:hover{
            border-color: #1890ff;
        }
        i{
            font-size: 28px;
            color: #8c939d;
        }
    }
    ul{
        list-style: none;
    }
    .flexbox{
        display: flex;
        flex-wrap: wrap;
    }
    .el-dialog__header{
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 20000;
    }
    .el-dialog__footer{
        position: sticky;
        bottom: -14px;
        z-index: 10001;
        background: #fff;
    }
    .dialog .el-dialog{
        position: relative;
        min-width: 800px;
        margin-top: 5vh!important;
        max-height: 88vh;
        overflow-y: scroll;
    }
    .dialog .el-form-item{
        display: flex;
        white-space: nowrap;
        .fireWidth{
            width: 500px;
            .imgList{
                height:150px;
                width:150px;
                position: relative;
                margin-right:8px;
                margin-bottom: 8px;
                &:hover .iconBg{
                    display: block;
                }
                .iconBg{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 150px;
                    display: none;
                    height: 150px;
                    border-radius: 6px;
                    background-color: rgba(0, 0, 0, 0);
                    transition: all .3s;
                    &:hover{
                        background-color: rgba(0, 0, 0, .5);
                    }
                    .ibox{
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        i{
                            font-size: 20px;
                            color: #fff;
                            cursor: pointer;
                        }                    
                    }
                }
                .elimg{
                    width: 100%; 
                    height: 100%;
                    border-radius: 5px;
                    box-sizing: border-box;
                    border: 1px solid #C0CCDA;
                }
            }
        }
        .el-form-item__label{
            font-weight: bold;
            color: #606266;
            vertical-align: middle;
            font-size: 14px;
        }
    }
    .dialog .el-form-item__label{
        width: 130px;
        padding-right: 10px;
        overflow: hidden;
        white-space: nowrap;
    }
</style>